<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.4);
            /*固定定位以视口(html窗口)为参照物
            紧贴四个边，实现撑满全屏的效果*/
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis fugiat itaque. Animi beatae
        commodi consectetur dignissimos eos et fuga, odit sapiente suscipit veritatis! Accusamus deserunt doloremque
        earum esse quam.
    </div>
    <div>Architecto consectetur, dignissimos dolores ducimus et ex inventore iusto laudantium nihil obcaecati
        praesentium quisquam quo repellendus sapiente tenetur velit voluptas voluptates. Debitis molestias rem suscipit?
        Animi aperiam atque in quod.
    </div>
    <div>Accusamus corporis cumque dolores itaque libero nemo numquam perspiciatis tempora vero! Eos in quis rem
        voluptatibus. Adipisci amet deleniti dicta, dolor inventore nemo nisi numquam porro praesentium soluta vel vero.
    </div>
    <div>Eaque eos illo iure labore molestiae nobis obcaecati, odit quibusdam sequi voluptates. Aspernatur aut
        blanditiis cupiditate error, laboriosam maiores modi molestias praesentium quas reiciendis suscipit ut vel
        voluptas. Consectetur, provident.
    </div>
    <div>Alias aliquam aspernatur eaque eligendi eos exercitationem illo impedit, ipsa nesciunt quibusdam quo ratione
        reprehenderit sunt. Blanditiis consectetur enim, id in incidunt nam neque nisi pariatur quo sed sit, vel!
    </div>
    <div>Ea eum mollitia neque perspiciatis quaerat, repellendus sunt temporibus voluptatibus! Aliquid doloribus eius
        laborum natus neque nisi porro repellendus! Aut corporis dolores eius eum iusto natus pariatur recusandae sint
        veritatis!
    </div>
    <div>Ipsum quam quo vel. Autem culpa fuga nesciunt similique. Accusantium dicta ducimus eaque fuga incidunt minima
        nostrum, vel? Corporis dolorem est ex facere illo illum laboriosam minima voluptatum! Optio, perspiciatis?
    </div>
    <div>Blanditiis cupiditate, ex id magnam sed suscipit vero voluptatibus! Ab asperiores cum dolorem, error iusto
        ratione saepe tempora voluptas? Commodi cum facere molestias obcaecati odio perferendis repudiandae saepe,
        tempora voluptas?
    </div>
    <div>Accusamus ad, est in maiores nam nemo pariatur perferendis repudiandae tenetur voluptatibus! Debitis dolor
        incidunt natus placeat suscipit, totam! Aliquid dolorem doloribus eaque quis, rem vel. Aperiam dicta rerum
        soluta.
    </div>
    <div>Aliquam amet ducimus esse inventore iure nulla quibusdam ratione reiciendis! Ab aliquid amet cupiditate esse
        excepturi illo, iure natus nobis optio porro quaerat quas quisquam quod, recusandae velit? Aperiam, blanditiis?
    </div>
    <div>Amet culpa ea eligendi numquam voluptates! Accusamus assumenda atque delectus doloremque dolorum, eaque eveniet
        exercitationem, hic in magnam maiores minima nostrum numquam perferendis porro quasi quod suscipit. A,
        necessitatibus, unde.
    </div>
    <div>Atque cumque deserunt dignissimos dolores ea eligendi expedita harum, impedit ipsa libero non nulla omnis,
        provident quaerat quasi, quia quisquam quos ratione rem repellendus repudiandae sunt temporibus ullam veritatis
        voluptatibus.
    </div>
    <div>Aperiam autem, consectetur dolorem dolores dolorum eius mollitia natus neque pariatur, placeat provident quo
        quos, sequi suscipit voluptas? Accusamus eos, neque nostrum optio quas velit? Aspernatur dicta, in! Aliquam,
        quas.
    </div>
    <div>Ab accusantium aspernatur aut autem culpa cum cumque deserunt, doloremque esse est eum eveniet fuga harum ipsam
        ipsum iure numquam officiis perspiciatis porro sequi sint tempora totam vero, voluptas voluptatum.
    </div>
    <div>Commodi doloremque dolores eaque error ex, excepturi fugit illum magnam mollitia nesciunt nihil nostrum placeat
        porro repudiandae similique ullam unde ut vel voluptas voluptatem. Atque consequatur dolor magni praesentium
        voluptatibus?
    </div>
    <div>Aliquam assumenda atque commodi deleniti distinctio in laboriosam mollitia nemo numquam officia placeat quos
        rem repellendus sit suscipit, tenetur vero vitae voluptas voluptates voluptatibus. Culpa delectus eum laborum
        nesciunt vel?
    </div>
    <div>Atque beatae cupiditate eligendi eum eveniet itaque iusto porro quos voluptatem. Animi blanditiis consequatur
        ea esse excepturi fugit ipsum laudantium magni modi, molestias placeat provident quas repellat saepe, sequi, ut.
    </div>
    <div>Ab accusantium ad asperiores delectus deserunt dicta distinctio dolorum eum explicabo harum illum in
        laudantium, mollitia natus numquam, odio officiis pariatur perferendis placeat possimus, quasi quibusdam ratione
        repudiandae velit veniam!
    </div>
    <div>Alias, at atque consequatur culpa cum dicta dignissimos distinctio doloremque error et excepturi, expedita
        fugit in incidunt ipsa iure nemo pariatur quibusdam quidem quo quod saepe soluta tempora temporibus voluptate!
    </div>
    <div>Autem consequatur, dolor eaque, eius enim error, ex harum laborum natus provident sint tenetur. Aliquam
        assumenda delectus deleniti, hic quia reprehenderit voluptatem. Ad aliquam assumenda iure iusto quisquam
        sapiente tenetur.
    </div>
    <div>Architecto dignissimos dolor, expedita inventore, molestias nemo placeat, reiciendis reprehenderit repudiandae
        saepe sapiente unde velit voluptatibus! Adipisci aut eveniet exercitationem facilis incidunt ipsa iste minima
        necessitatibus placeat quas, rerum, voluptatum.
    </div>
    <div>Amet architecto cumque excepturi fugit illo ipsa ipsum maiores nam, nemo neque, nesciunt obcaecati officia
        omnis praesentium provident quae quisquam quod recusandae, sequi similique sunt tempora tempore ut veritatis
        vero.
    </div>
    <div>Iste mollitia officia ratione. Adipisci animi cupiditate debitis ea eos ex fugit harum illo impedit ipsam iure
        odit perferendis placeat possimus provident quae, quasi quia reiciendis sed temporibus vel, velit.
    </div>
    <div>Adipisci, animi at autem ducimus enim eos eum eveniet in ipsam laboriosam laborum nesciunt perferendis porro
        quaerat quisquam rerum ut voluptate! Aliquid autem impedit natus odit, quaerat quas quo sint!
    </div>
    <div>A accusamus aliquam aliquid animi, asperiores corporis delectus distinctio dolores enim, eveniet expedita
        illum, in labore laboriosam natus nostrum odio officia perferendis perspiciatis quas ratione rem tempora velit
        vero voluptates?
    </div>
    <div>Asperiores ea nulla obcaecati qui quod sint soluta temporibus ullam. Animi eos est eum hic illum itaque
        laudantium, nemo officiis rem voluptate. Aperiam assumenda cupiditate expedita explicabo in officia rerum!
    </div>
    <div>Ab accusamus accusantium architecto aut debitis deleniti dolore enim esse, facilis illum labore, maiores porro
        quibusdam repudiandae sequi soluta, tempora veritatis? Accusantium consequuntur cumque in itaque nostrum nulla
        rem ut!
    </div>
    <div>Accusantium commodi dolore exercitationem inventore laboriosam laborum nam neque nisi non obcaecati porro quod,
        similique velit! Dolor doloribus dolorum ex necessitatibus pariatur porro repudiandae sit, soluta veritatis!
        Inventore laborum, rem.
    </div>
    <div>Ad adipisci aspernatur autem consequuntur culpa delectus deserunt dignissimos distinctio, dolor eaque ipsa
        ipsum laudantium necessitatibus nemo, nesciunt nulla, odio odit omnis pariatur perferendis quas quidem rem
        repudiandae saepe suscipit.
    </div>
    <div>Modi recusandae rerum unde voluptas? Alias aliquid, facilis libero molestiae nesciunt, nostrum optio quidem,
        ratione rerum ullam voluptates voluptatibus. Dolores ea fugiat illum iure modi neque placeat rem temporibus
        voluptas!
    </div>
    <div>A ab adipisci aliquam, animi commodi distinctio dolores earum ex, excepturi explicabo illo incidunt ipsum
        labore magni, maiores nemo praesentium quisquam rerum? Aperiam deserunt, dolorum esse in itaque saepe totam.
    </div>
    <div>Accusamus alias aperiam, asperiores beatae ea eos facilis harum illum libero nam nulla omnis repellat sequi
        velit voluptas! Dolorem earum ex itaque libero maxime mollitia natus nemo omnis ratione voluptatibus.
    </div>
    <div>Accusantium aliquam aspernatur consectetur, consequatur consequuntur laudantium minima nam neque nisi, numquam
        odio perspiciatis, provident quam reiciendis reprehenderit rerum veritatis? Ad beatae dolorum enim expedita
        facilis ipsam quis, suscipit voluptatem?
    </div>
    <div>Accusantium aperiam commodi deserunt doloribus dolorum error, magnam magni neque nesciunt officiis placeat
        quibusdam quidem voluptas? Aliquid animi asperiores, cupiditate, delectus deleniti laborum magnam maxime minima
        minus omnis repellat similique?
    </div>
    <div>Animi ea facilis fugiat nam nisi soluta suscipit? Aliquid atque aut, culpa cum, cumque delectus dicta dolores
        eius enim excepturi libero minima nostrum nulla numquam obcaecati quasi ratione saepe sequi.
    </div>
    <div>Ad adipisci, eveniet fuga, fugiat ipsa maiores molestias numquam obcaecati odit perferendis quasi, qui tenetur
        vitae! Enim eveniet fugiat fugit, molestias neque, pariatur quaerat quisquam, ratione reiciendis sequi similique
        velit.
    </div>
    <div>Adipisci aliquid architecto autem blanditiis consequatur cumque dolor doloremque doloribus eveniet inventore,
        molestias nesciunt nisi nulla odio pariatur placeat quidem quis quod recusandae reiciendis rerum soluta sunt vel
        veniam voluptatem.
    </div>
    <div>Delectus ex hic natus nulla numquam omnis saepe veniam, vitae voluptates. Animi beatae inventore neque officiis
        velit! Ad consequatur, corporis, distinctio est laudantium officiis quasi quisquam, ratione reiciendis tenetur
        ut.
    </div>
    <div>Aspernatur commodi corporis doloribus fuga laboriosam laborum neque nulla, numquam praesentium quaerat rem
        sequi similique sunt tempora, totam ut vero. Animi aspernatur dolor earum, hic id iste minima molestiae sed?
    </div>
    <div>Aliquam aperiam consequuntur cupiditate deleniti explicabo natus non, odit quae quos? Aliquam, laborum
        quisquam? Adipisci beatae distinctio error fugiat odit rerum ut, vel voluptates. Beatae dolor ipsa libero minus
        reprehenderit?
    </div>
    <div>Accusamus animi laudantium maiores minima neque nulla perspiciatis reprehenderit similique ut vero? Accusamus
        amet deserunt est et perspiciatis porro, praesentium suscipit temporibus? Doloremque excepturi vero voluptas!
        Accusantium aspernatur deleniti qui.
    </div>
    <div>Delectus officia quaerat repudiandae sed veritatis. Aperiam distinctio excepturi exercitationem impedit rerum
        ut voluptatibus. Asperiores assumenda atque dolor neque sit. Aliquid aperiam aut culpa cumque doloremque et,
        exercitationem odio sit.
    </div>
    <div>Accusantium amet consequuntur cum dignissimos eum illum ipsam molestias recusandae sint veritatis! Ab aliquid
        aut corporis, dicta eum, fuga fugiat id impedit ipsam optio quam quasi reiciendis rem totam voluptate!
    </div>
    <div>Animi aut autem, dolorem ex excepturi hic necessitatibus quos, tempora ullam veritatis vero vitae. Assumenda
        deserunt, doloremque ea esse eveniet excepturi ipsum magnam maiores molestias perspiciatis quas quibusdam ullam
        vel!
    </div>
    <div>Aliquam corporis error magni non porro repellendus repudiandae. Accusantium, consequatur eaque eum
        exercitationem minus repellat vero. Ad assumenda doloribus facilis fuga inventore pariatur possimus ratione rem
        temporibus unde. Animi, optio!
    </div>
    <div>Dicta distinctio, doloremque esse et ipsam libero magnam nam nesciunt omnis quibusdam. Corporis eaque optio
        vitae voluptas! Consequuntur debitis deleniti eum exercitationem ipsam laborum natus necessitatibus obcaecati
        optio vitae. A.
    </div>
    <div>Iusto, nesciunt, suscipit? Asperiores cumque dicta dolores eius est hic impedit labore laboriosam maiores minus
        modi mollitia nobis, non odit qui quos, suscipit, tempore unde ut velit? Eos libero, quibusdam?
    </div>
    <div>Accusamus aut, consectetur cum cupiditate debitis deserunt distinctio est explicabo id illum in nobis, nulla
        possimus quae quasi quos reiciendis repudiandae rerum sapiente sed sint soluta, tenetur veniam vero voluptatem.
    </div>
    <div>Commodi consequuntur facilis harum numquam quisquam sed tenetur unde! Dicta earum et hic praesentium? Atque
        dolores earum enim ipsum labore minima molestias, nam neque, odio quam quibusdam sed totam, ut.
    </div>
    <div>Aspernatur blanditiis ea ex facere facilis inventore, magnam nihil nobis obcaecati placeat, sunt unde? Cum eius
        eum fuga itaque minima natus odit omnis. Alias dicta distinctio nesciunt non officiis quis?
    </div>
</div>
</body>
</html>